<template>
	<div class="content actCashBox">
		<div class="searchBox">
			<span class="searchText">活动主题:</span><input type="text" class="searchInput" placeholder="请输入活动主题" v-model="activityTheme">
			<select class="searchInput" v-model="activityType">
				<option value="">请选择活动场景</option>
				<option value="994001">注册</option>
				<option value="994002">充值</option>
				<option value="994003">充电</option>
				<option value="994004">页面活动</option>
				<!-- <option value="994005">分享</option> -->
			</select>
            <span class="searchText">开始时间区间:</span>
			<el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
			</el-date-picker>
			<div class="searchBut" @click="findActList"><img src="../../assets/search.png" class="foundPic"/>搜索</div>
		</div>
		<div class="tableBox">
			<div class="playBox">
				<div :class="[one,{'detail':classa,'gray':classb}]" @click="actCashBackDetail">详情</div>
			</div>
			<div class="contentTable">
				<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
				</div>
				<div v-else-if="searchType == 2">
					<img src="~_assets/nosearch.png" class="searchResult">
				</div>
				<bootstrap-table v-else :my_columns="my_columns" :my_data="data1" :my_options="my_options" @item="getItem" ref="table1"></bootstrap-table>
			</div>
		</div>
		<div v-if="showActCashBackDetail">
			<ActCashBackDetail @closeActCashBack='closeActCashBack' :items="trData"></ActCashBackDetail>
		</div>
	</div>
</template>

<script>
import { time } from "_config/common.js";
import ActCashBackDetail from "./children/ActCashBackDetail";
import { FIND_ACTIVITY_LIST_BY_PARAM } from "@/config/url";
export default {
  components: {
    ActCashBackDetail
  },
  mounted: function() {
    this.findActList();
  },
  data() {
    return {
      one: "butInfoMes",
      classa: false,
      classb: true,
      searchType: "12",
      pickerOptions: time,
      activityTheme: "", //活动主题
      activityType: "", //活动类型
      time: "", // 时间区间
      showActCashBackDetail: false,
      trData: "",
      page: 1,
      size: 10,
      my_columns: [
        {
          title: "序号",
          field: "",
          formatter: function(value, row, index) {
            return index + 1;
          }
        },
        {
          title: "活动主题",
          field: "activityTheme",
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "活动场景",
          field: "activityType",
          formatter: function(value, row, index) {
            if (value == 994001) {
              value = "注册";
            } else if (value == 994002) {
              value = "充值";
            } else if (value == 994003) {
              value = "充电";
            } else if (value == 994004) {
              value = "页面活动";
            } else if (value == 994005) {
              value = "分享";
            } else {
              value = "";
            }
            return value;
          }
        },
        {
          title: "返现类型",
          field: "differentiate",
          formatter: function(value, row, index) {
            if (value == 986001) {
              value = "固定返现";
            } else if (value == 986002) {
              value = "随机返现";
            } else if (value == 986003) {
              value = "百分比返现";
            } else {
              value = "";
            }
            return value;
          }
        },
        {
          title: "返现金额(元)",
          field: "cashbackMoney",
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "开始时间",
          field: "startTime",
          sortable: true
        },
        {
          title: "结束时间",
          field: "endTime",
          sortable: true
        }
      ],
      data1: [],
      my_options: {
        pagination: true
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  methods: {
    getItem(data) {
      if (data && data.id) {
        this.classa = true;
        this.classb = false;
        this.trData = data;
      }
    },
    actCashBackDetail() {
      this.showActCashBackDetail = true;
    },
    closeActCashBack() {
      this.showActCashBackDetail = false;
    },
    findActList() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: FIND_ACTIVITY_LIST_BY_PARAM,
        queryParams: this.getParams
      };
    },
    getParams() {
      this.classa = false;
      this.classb = true;
      let startTime;
      let endTime;
      if (this.time == "" || this.time == null || this.time == undefined) {
        startTime = "";
        endTime = "";
      } else {
        startTime = this.moment(this.time[0]).format("YYYY-MM-DD HH:mm:ss");
        endTime = this.moment(this.time[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      let param = {
        activityTheme: this.activityTheme,
        activityType: this.activityType,
        startTime: startTime,
        endTime: endTime,
        page: this.$refs.table1.local.options.pageNumber,
        size: this.$refs.table1.local.options.pageSize
      };
      return param;
    }
  }
};
</script>

<style lang="less">
.actCashBox {
  .el-input__inner {
    height: 0.18rem;
    border-radius: 8px;
    padding-left: 0.08rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(181, 194, 202, 1);
    margin-right: 0.2rem;
    margin-left: 0.04rem;
  }
  .contentTable {
    width: 99%;
  }
  .contentTable {
    width: 99%;
  }

  .bootstrap-table {
    padding-top: 0;
  }
  .bootstrap-table table thead tr th,
  .bootstrap-table table tbody tr td {
    width: 6%;
  }
  .bootstrap-table table thead tr th:nth-of-type(1),
  .bootstrap-table table tbody tr td:nth-of-type(1) {
    width: 3%;
  }
}
</style>